<template>
	<view class="cabinet_box">

		<view class="ztop_box">
			<view class="sm_box">
				<!-- 未处理按钮 -->
				<view :class="dShow ? 'wclBtn' : 'wclBtn1'" @tap="wBtn">
					<view>待处理</view>
				</view>
				<view :class="yShow ? 'yclBtn' : 'yclBtn1'" @tap="yBtn">
					<view>已处理</view>
				</view>
				<view :class="xShow ? 'bxgBtn' : 'bxgBtn1'" @tap="xBtn">
					<view>保险柜</view>
				</view>
			</view>
		</view>
		<!-- 拒提，赠送，反悔，发货盒子 -->
		<template v-if="dShow == true">
			<view style="height: 186rpx; position: relative; z-index: 999;">
				<view class="dzf_box">
					<view class="suihuan_box" @tap="duihuan" v-if="anniuSta.is_exchange_but == 1">
						拒提
					</view>
					<view class="zengsong_box" @tap="fahui" v-if="anniuSta.is_recovery_but == 1">
						反悔
					</view>
					<view class="fahuo_box" @tap="fahuo" v-if="anniuSta.is_send_but == 1">
						提货
					</view>
					<view class="gengduo_box" @tap="gengduo" v-if="loginStatus">
						更多
						<u-icon v-if="gengduo_show == true" name="arrow-up" color="#ffffff" margin-left="4rpx"
							size="28"></u-icon>
						<u-icon v-if="gengduo_show == false" name="arrow-down" color="#ffffff" margin-left="4rpx"
							size="28"></u-icon>
					</view>
				</view>
				<!-- 更多 -->
				<view class="zhedie_box" v-show="gengduo_show">

					<view class="fanhui_box" @tap="zengsong" v-if="anniuSta.is_give_but == 1">
						赠送
					</view>
					<view class="suo_box" @tap="shangsuo" v-if="anniuSta.is_lock_but == 1">
						上锁
					</view>
				</view>
			</view>
			<scroll-view class="hezi_box" scroll-y="true" @scrolltolower="lower()" :show-scrollbar="false" enhanced
				refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh">
				<template v-if="orderList.length > '0'">

					<view class="bot_big_box">
						<view class="bot_box" v-for="item, index in orderList" :key="index" @click="goDetails(item)">
							<!-- <view class="top_time_box">
								<view class="maghe_name_box">{{ item.title }}</view>
								
							</view> -->
							<view class="zhongjian_box">
								<view class="dengji_box_tl">
									<image :src="item.level_icon" mode=""></image>
								</view>
								<view class="left_box">
									<image :src="item.prize_icon" mode=""></image>
								</view>
								<view class="right_box">
									<view class="maghe_name_box">{{ item.title }}</view>
									<view class="one_txt">
										{{ item.prize_name }}
									</view>
									<view class="two_txt">

									</view>
									<view class="thr_txt">
										<text style="float: left;">价值：{{ item.price }}/大王币{{ item.recovery_price }}</text>
										<text style="float: right;">x{{ item.num }}</text>
									</view>
									<view class="create_time_box">创建时间：{{ item.create_time }}</view>
								</view>
							</view>
							<!-- <view class="bot_txt_box">
								该商品仅可在{{ item.expire_time }}前，进行操作，过期
								后将自动拒提为大王币
							</view> -->
						</view>
					</view>
				</template>
				<template v-else>
					<view class="emptya flex-column flex-c-c">
						<view class="" style="width: 518rpx;height: 412rpx;margin: auto;">
							<image style="width: 100%; height: 100%;"
								src="https://mh.qingfentool.vip/upload/image/20230529/a63d80de20efc83f80f591044ae9e5dc.png"
								mode="">
							</image>
							<view style="width: 100%;text-align: center; color: #666666;font-size: 28rpx;">
								暂无商品～快去抽取心动盲盒吧
							</view>
						</view>
					</view>
				</template>

			</scroll-view>
		</template>
		<view v-show="zhezhaoceng"
			style="width: 100%; height: calc(100vh - 345rpx);background-color: #000;opacity: .4; position: absolute;bottom: 0;">
		</view>
		<template v-if="yShow == true">
			<view class="">
				<yichul :duihuanList="duihuanList"></yichul>
			</view>
		</template>
		<template v-if="xShow == true">
			<view class="">
				<bxg :cabinetlist="cabinetlist"></bxg>
			</view>
		</template>
		<zdy-tabbar :current-page="3"></zdy-tabbar>
	</view>
</template>
<script>
import yichul from '@/components/yichuli/index.vue'
import bxg from '@/components/bxg/index.vue'
export default {
	components: {
		yichul,
		bxg
	},
	data() {
		return {
			dShow: true,
			yShow: false,
			xShow: false,
			orderList: [],
			duihuanList: [],
			page: 1,
			page1: 1,
			allpages: 1,
			numPag: 1,
			allNum: 0,
			cabinetlist: [],
			triggered: false,
			allNums: 0,
			xNums: 0,
			duiNums: 0,
			gengduo_show: false, //更多
			zhezhaoceng: false,
			loginStatus: false,//登陆状态
			totalPage: 1,
			isDown: false,
			anniuSta: {},//按钮状态
			flag: true,
		}
	},
	onLoad() {
		this.dShow = true
		uni.setStorageSync('cabShuaxin', 1)
	},
	onShow() {
		this.gengduo_show = false
		this.zhezhaoceng = false
		this.allpages = 1
		if (uni.getStorageSync('cabShuaxin') == 1) {
			this.orderList = []
			this.getLoginStatus()
			uni.setStorageSync('cabShuaxin', 0)
		}

	},
	methods: {
		// 跳转详情
		goDetails(item) {
			////console.log("待处理item：", item)
			uni.navigateTo({
				url: '/userPage/user/order/shopDetails?orderId=' + item.order_id + '&cate=' + item.cate + "&ydhType=" + 0 + "&titleType=" + item.title + "&isDuhuan=" + 0
			})
		},
		onRefresh() {
			this.triggered = true
			setTimeout(() => {
				this.triggered = false
			}, 10)

		},

		requestAll() {
			this.getList()
		},
		lower() {
			if (this.flag) {
				this.getList();
			} else {
				uni.showToast({
					title: "已经到底了",
					icon: 'none'
				})
			}


		},
		lower1() {
			if (this.flag) {
				this.yBtn()
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			}

		},
		xLower() {
			if (this.flag) {
				this.xBtn()
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			}

		},
		// 拒提按钮
		duihuan() {
			uni.navigateTo({
				url: '/userPage/user/order/duihuanlist'
			})
		},
		// 赠送按钮
		zengsong() {
			uni.navigateTo({
				url: '/userPage/user/order/zengsonglist1'
			})

		},
		// 发货按钮
		fahuo() {
			if (!this.loginStatus) {
				return;
			}
			uni.navigateTo({
				url: '/userPage/user/order/sendlist'
			})
		},
		//反悔按钮
		fahui() {
			if (!this.loginStatus) {
				return;
			}
			uni.navigateTo({
				url: '/userPage/user/order/fhym'
			})
		},
		//上锁按钮
		shangsuo() {
			if (!this.loginStatus) {
				return;
			}
			uni.navigateTo({
				url: '/userPage/user/order/suo'
			})
		},
		// 更多按钮
		gengduo() {
			this.gengduo_show = !this.gengduo_show
			this.zhezhaoceng = !this.zhezhaoceng
		},
		wBtn(e) {
			//console.log(e)
			this.cabinetlist = []
			this.duihuanList = []
			this.page1 = 1
			this.zhezhaoceng = false
			this.numPag = 1
			this.gengduo_show = false
			this.dShow = true
			this.yShow = false
			this.xShow = false
			this.allpages = 1
			this.orderList = []
			if (this.getLoginStatus()) {
				this.getList()
			}
		},
		//已拒提列表
		yBtn() {
			this.cabinetlist = []
			this.orderList = []
			this.zhezhaoceng = false
			this.numPag = 1
			this.dShow = false
			this.yShow = true
			this.xShow = false
			let data = {
				page: this.page1,
			}
			if (!this.loginStatus) {
				return;
			}
			uni.showLoading({
				title: '加载中...'
			})
			this.$Request.get(this.$api.order.getExchangeList, data).then(res => {
				uni.hideLoading()
				var duihuanList = res.data;
				this.page1++;
				this.duihuanList = this.duihuanList.concat(duihuanList)
				if (duihuanList.length < 10) {
					this.flag = false
				} else {
					this.flag = true
				}
			})
		},
		//保险柜
		xBtn() {
			this.duihuanList = []
			this.orderList = []
			this.page1 = 1
			this.zhezhaoceng = false
			this.dShow = false
			this.yShow = false
			this.xShow = true
			this.allNum = 0
			let data = {
				page: this.numPag,
				status: 1
			}
			if (!this.loginStatus) {
				return
			}
			uni.showLoading({
				title: '加载中...'
			})
			this.$Request.get(this.$api.order.orderList, data).then(res => {
				uni.hideLoading()

				this.numPag++;
				var cabinetlist = res.data.list;
				this.cabinetlist = this.cabinetlist.concat(cabinetlist)
				if (cabinetlist.length < 10) {
					this.flag = false

				} else {
					this.flag = true

				}
				// this.cabinetlist = this.cabinetlist.concat(res.data.list)
				// if (bxgType == 2) {
				// 	
				// } else {
				// 	this.cabinetlist = res.data.list
				// }
			})
		},
		// 列表
		getList() {
			let data = {
				page: this.allpages
			}
			uni.showLoading({
				title: "加载中..."
			})
			this.$Request.get(this.$api.order.orderList, data).then(res => {
				this.anniuSta = res.data.but
				uni.hideLoading()
				var orderList = res.data.list;
				this.allpages++;
				this.orderList = this.orderList.concat(orderList);// 拼接回来的数据
				// 当回来的数据小于十条得时候 不让再请求了 否则继续请求
				if (orderList.length < 10) {
					this.flag = false
				} else {
					this.flag = true
				}
			})
		},
		// 获取登录状态
		getLoginStatus() {
			this.$Request.get(this.$api.index.loginStatus).then(res => {
				if (res.data.status == 1) {
					this.loginStatus = true;
					this.getList()
				} else {
					this.loginStatus = false;
				}
			})
		},
	}

}
</script>

<style lang="scss" scoped>
.cabinet_box {
	width: 100%;
	height: 100vh;
	position: relative;
	background-image: url('https://mh.qingfentool.vip/upload/image/20230516/05be10811bc664725b37dbeaa51bc456.png');
	background-size: 100% 100%;

	.ztop_box {
		width: 100%;
		height: 150rpx;
		margin: auto;
		position: relative;
		overflow-x: hidden;

		.sm_box {
			z-index: 999999998989;



			/* #ifdef APP-PLUS */
			padding: 0 50rpx;
			width: 100%;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			width: 500rpx;
			overflow-x: hidden;
			/* #endif */
			height: 53%;
			position: absolute;
			// background-color: #fff;
			bottom: 0;
			left: 15rpx;
			display: flex;
			justify-content: space-between;
			margin: auto;
			padding-top: 18rpx;

			.wclBtn {
				width: 149rpx;
				height: 62rpx;
				font-size: 32rpx;
				font-weight: 500;
				border: 1rpx solid #FF9F00;
				background: rgba(0, 0, 0, 0.1);
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
				border-radius: 50rpx;
				color: #fff;
				line-height: 64rpx;
				text-align: center;
			}

			.wclBtn1 {
				width: 149rpx;
				height: 62rpx;
				font-size: 32rpx;
				font-weight: 500;
				// border: 1rpx solid #FF9F00;
				border-radius: 50rpx;
				color: #fff;
				line-height: 64rpx;
				text-align: center;
			}

			.yclBtn {
				width: 149rpx;
				height: 62rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				background: rgba(0, 0, 0, 0.1);
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
				border: 1rpx solid #FF9F00;
				border-radius: 50rpx;
				color: #fff;
				line-height: 64rpx;
				position: relative;
			}

			.yclBtn1 {
				width: 149rpx;
				height: 62rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				// border: 1rpx solid #FF9F00;
				border-radius: 50rpx;
				color: #fff;
				line-height: 64rpx;
				position: relative;
			}

			.bxgBtn {
				width: 149rpx;
				height: 62rpx;
				text-align: center;
				background: rgba(0, 0, 0, 0.1);
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
				font-size: 32rpx;
				border: 1rpx solid #FF9F00;
				border-radius: 50rpx;
				color: #fff;
				line-height: 64rpx;
				position: relative;
			}

			.bxgBtn1 {
				width: 149rpx;
				height: 62rpx;
				text-align: center;
				font-size: 32rpx;
				// border: 1rpx solid #FF9F00;
				border-radius: 50rpx;
				color: #fff;
				line-height: 64rpx;
				position: relative;
			}
		}

	}

	.zhedie_box {
		width: 98%;
		height: 78rpx;
		margin: auto;
		// margin-top: 18rpx;
		padding-left: 18rpx;
		;

		.fanhui_box,
		.suo_box {
			width: 152rpx;
			height: 68rpx;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			color: #ffffff;
			border: 1rpx solid #FF9F00;
			background: rgba(0, 0, 0, 0.1);
			box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
			text-align: center;
			line-height: 68rpx;
			font-size: 30rpx;
			float: left;
			margin-right: 34rpx;
		}
	}

	.dzf_box {
		width: 98%;
		height: 68rpx;
		margin: auto;
		margin-top: 50rpx;
		display: flex;
		margin-bottom: 6rpx;
		justify-content: space-around;

		.suihuan_box {
			width: 152rpx;
			height: 68rpx;
			color: #ffffff;
			border: 1rpx solid #FF9F00;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			text-align: center;
			line-height: 68rpx;
			font-size: 30rpx;
		}

		.zengsong_box {
			z-index: 9999;
			width: 152rpx;
			height: 68rpx;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			color: #ffffff;
			border: 1rpx solid #FF9F00;
			text-align: center;
			line-height: 68rpx;
			font-size: 30rpx;
		}

		.fahuo_box {
			width: 152rpx;
			height: 68rpx;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			color: #ffffff;
			border: 1rpx solid #FF9F00;
			text-align: center;
			line-height: 68rpx;
			font-size: 30rpx;
		}

		.gengduo_box {
			width: 152rpx;
			height: 68rpx;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			color: #ffffff;
			border: 1rpx solid #FF9F00;
			text-align: center;
			line-height: 68rpx;
			font-size: 30rpx;
		}


	}


	.hezi_box {
		width: 100%;
		height: calc(100vh - 275rpx);
		// height: 100%;
		position: absolute;
		bottom: 0;
		overflow: hidden;
		overflow: auto;

		.bot_big_box {
			// height: 100%;
			// background-color: #F7F7F7;
			// overflow: auto;
			// height: 100vh;

			.bot_box {
				width: 98%;
				height: 260rpx;
				background: rgba(255, 231, 192, 0.1);
				margin: auto;
				border-radius: 20rpx;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(101, 101, 101, 0.09);
				border: 1rpx solid #FED187;
				margin-top: 30rpx;

				.top_time_box {
					margin-top: 20rpx;
					padding-left: 28rpx;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
					display: flex;
					justify-content: space-between;
					align-items: center;




				}

				.zhongjian_box {
					height: 178rpx;
					width: 92%;
					// background-color: #fff;
					display: flex;
					margin: auto;
					margin-top: 34rpx;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.dengji_box_tl {
						position: absolute;
						left: 10rpx;
						top: 5rpx;
						width: 96rpx;
						height: 52rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.left_box {
						width: 185rpx;
						height: 185rpx;
						border-radius: 18rpx 18rpx 18rpx 18rpx;

						border: 1rpx solid #FED187;
						// border: 2rpx solid #5191FF;
						// background-color: white;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right_box {
						width: 70%;
						height: 100%;

						.maghe_name_box {
							margin-top: 10rpx;
							width: 80%;
							height: 36rpx;
							font-size: 32rpx;
							font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 36rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.create_time_box {
							width: 100%;
							height: 28rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #ffffff;
						}

						.one_txt {
							margin-top: 16rpx;
							width: 350rpx;
							height: 38rpx;
							font-size: 26rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 38rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.two_txt {
							width: 100%;
							height: 38rpx;
							font-size: 26rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 38rpx;
						}

						.thr_txt {
							width: 400rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #FFAE2A;
							line-height: 0;
						}
					}
				}

				.bot_txt_box {
					width: 92%;
					height: 56rpx;
					margin: auto;
					margin-top: 20rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #ffffff;
					line-height: 28rpx;
				}
			}
		}
	}

}
</style>